<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!--这里是员工和管理员界面-->
    <title>快递之家管理系统</title>
</head>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="/static/layui/layui/css/layui.css">
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="head::NavHeader"></div>
    <div th:replace="menu::NavMenu"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title">
            <legend>员工列表信息</legend>
        </fieldset>
        <table id="kdgl_ygTable" lay-filter="kdgl_ygTable"></table>
        <div id="ygInfoToolBar" style="display: none;">
            <button type="button" lay-event="save" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-add-1"></span>添加</button>
            <!--            <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>批量删除</button>-->
        </div>
        <div id="ygInfoRowBar" style="display: none;">
            <button type="button" lay-event="update" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-edit">修改</span></button>
            <button type="button" lay-event="delete" class="layui-btn layui-btn-danger"><span class="layui-icon layui-icon-delete">删除</span></button>
        </div>
    </div>
    <div th:replace="bottom::NavBottom"></div>
</div>
    <form class="layui-form" id="kdgl_yg" style="display:none" lay-filter="kdgl_ygForm">
    <div class="layui-form-item">
        <label class="layui-form-label">员工编号</label>
        <div class="layui-input-block">
            <input type="hidden" name="yid">
            <input type="text" name="yno" required  lay-verify="required" placeholder="请输入员工编号" autocomplete="on" class="layui-input" id="ytelephone" style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="yn" required  lay-verify="required" placeholder="请输入姓名" autocomplete="on" class="layui-input" id="yn" style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-inline">
            <input type="password" name="ypw" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input" style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="ysex" value="男" title="男">
            <input type="radio" name="ysex" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <input type="text" name="yage" required  lay-verify="required" placeholder="请输入年龄" autocomplete="on" class="layui-input" id="yage" style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话号码</label>
        <div class="layui-input-block">
            <input type="text" name="ytelephone" required  lay-verify="required" placeholder="请输入电话号码" autocomplete="on" class="layui-input" id="ytelephone" style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职务</label>
        <div class="layui-input-block">
            <input type="text" name="yposition" required  lay-verify="required" placeholder="请输入身份证号码" autocomplete="on" class="layui-input" id="ypid" style="width:200px">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button lay-submit="kdgl_ygForm" lay-filter="sub" class="layui-btn layui-btn-normal tijiao">提交</button>
        </div>
    </div> 
</form>


</body>
<script src="/static/layui/layui/layui.all.js"></script>
<script src="/static/jquery/jquery-3.4.0.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['jquery','element','form','table','layer','laydate'], function(){
        var $ = layui.jquery;
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //第一个实例
        var tableIns = table.render({
            elem: '#kdgl_ygTable'
            , height: 'full-220'
            ,toolbar: '#ygInfoToolBar' //开启头部工具栏，并为其绑定左侧模板
            ,url: '/yg/getAllYg' //数据接口
            ,page: true //开启分页
            ,cols: [ [ //表头
                ,{field: 'yid', title: 'ID', width:80, sort: true, fixed: 'left', hide: true}
                ,{field: 'yno', title: '员工编号', width:100}
                ,{field: 'yn', title: '员工姓名', width:100}
                ,{field: 'ypw', title: '密码', width:80}
                ,{field: 'ysex', title: '性别', width:80, sort: true}
                ,{field: 'yage', title: '年龄', width:80, sort: true}
                ,{field: 'ytelephone', title: '员工电话', width:150}
                ,{field: 'yposition', title: '职务', width: 80, sort: true}
                ,{fixed: 'right', title: '操作', toolbar: '#ygInfoRowBar'}
            ] ]
        });

        //监听工具条的事件
        table.on('toolbar(kdgl_ygTable)', function(obj){
            switch (obj.event) {
                case 'batchDelete':
                    batchDelete();
                    break;
                case 'save':
                    save();
                    break;
            };
        });

        //监听行工具条的事件
        table.on('tool(kdgl_ygTable)', function(obj){ //注：tool 是工具条事件名，kdglTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'delete':
                    deleteInfo(data);
                    break;
                case 'update':
                    update(data);
                    break;
            };
        });

        //修改
        function update(data) {
            layer.open({
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,area: ['900px', '600px']
                ,title: ['修改员工信息','font-size:18px']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: false //允许全屏最小化
                ,content:$("#kdgl_yg") //如果要form表单提交必须是$("#t") dom元素，不能是$("#kdgl").html()
                ,success:function(layero,index){
                    form.val('kdgl_ygForm',data);
                    form.render();//动态渲染
                    form.on('submit(sub)', function(data){
                        $.ajax({
                            url:"/yg/update",
                            dataType:"json",   //返回格式为json
                            async:true,
                            data:data.field,    //参数值
                            type:"POST",   //请求方式
                            success:function(req){
                                //请求成功时处理
                                //console.log(req);
                                if(req.code === 0){
                                    layer.alert('编辑成功',{icon:1,title:'提示'})
                                    table.reload('kdgl_ygTable',{ //重载表格
                                        page:{
                                            curr:1
                                        }
                                    })
                                }else{
                                    layer.msg('发送失败 '+req.msg, {icon: 5});
                                }
                            },
                            error:function(){
                                //请求出错处理
                                layer.msg('发送失败', {icon: 5});
                            }
                        });
                    });
                },yes: function(){
                    layer.closeAll();
                },end:function (res) {
                    // $('.layui-layout-body').load('/yg/toYgList');
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.location.reload(); //刷新父页
                    parent.layer.close(index);
                    $("#kdgl_hd").css("display",'none');
                }
            });
        }

        //修改
        function save() {
            layer.open({
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,area: ['900px', '600px']
                ,title: ['添加员工','font-size:18px']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                ,maxmin: false //允许全屏最小化
                ,content:$("#kdgl_yg") //如果要form表单提交必须是$("#t") dom元素，不能是$("#kdgl_yg").html()
                ,success:function(layero,index){
                    form.render();//动态渲染
                    form.on('submit(sub)', function(data){
                        $.ajax({
                            url:"/yg/save",
                            dataType:"json",   //返回格式为json
                            async:true,
                            data:data.field,    //参数值
                            type:"POST",   //请求方式
                            success:function(req){
                                //请求成功时处理
                                //console.log(req);
                                if(req.code === 0){
                                    layer.alert('编辑成功',{icon:1,title:'提示'})
                                    table.reload('kdgl_ygTable',{ //重载表格
                                        page:{
                                            curr:1
                                        }
                                    })
                                }else{
                                    layer.msg('发送失败 '+req.msg, {icon: 5});
                                }
                            },
                            error:function(){
                                //请求出错处理
                                layer.msg('发送失败', {icon: 5});
                            }
                        });
                    });
                },yes: function(){
                    layer.closeAll();
                },end:function (res) {
                    // $('.layui-layout-body').load('/yg/toYgList');
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.location.reload(); //刷新父页
                    parent.layer.close(index);
                    $("#kdgl_hd").css("display",'none');
                }
            });
        }

        //删除
        function deleteInfo(data) {
            layer.confirm('是否确定删除这些数据？', {icon: 3, title:'提示'}, function(index){
                $.post("/yg/delete",{yid:data.yid},function (res) {
                    if (res.code==0){
                        tableIns.reload();
                    }
                    layer.msg(res.data);
                })
                layer.close(index);
            });
        }

        //批量删除
        function batchDelete(){
            //得到选中行
            var checkStatus = table.checkStatus('kdgl_ygTable');
            var data = checkStatus.data; //获取选中行数据
            var length = checkStatus.data.length;//获取选中行数量，可作为是否有选中行的条件
            if (length>0){
                layer.confirm('是否确定删除这些数据？', {icon: 3, title:'提示'}, function(index){
                    var ids = "";
                    $.each(data,function (index,item) {
                        if (index==0){
                            ids += "ids="+item.id;
                        }else {
                            ids += "&ids="+item.id;
                        }
                        alert(ids);
                    })
                    $.post("/yg/batchDelete",ids,function (res) {
                        if (res.code==0){
                            tableIns.reload();
                        }
                        layer.msg(res.data);
                    })
                    layer.close(index);
                });
            }else {
                layer.msg("请选中操作行");
            }
        }
    });
</script>
</html>